<template>
  <div class="drawer">
    <el-drawer :wrapperClosable="false"
               v-bind="$attrs" v-on="$listeners">
      <el-row class="drawer-content">
        <slot></slot>
      </el-row>
      <el-row class="drawer-footer">
        <slot name="footer">
          <el-button size="small" type="primary" icon="el-icon-check" @click="">保存</el-button>
          <el-button size="small" icon="el-icon-refresh-right" @click="">重置</el-button>
        </slot>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name:"TDrawer",
  data() {
    return {}
  },
  methods: {},
}
</script>

<style lang="less" scoped>
@padding-top: 10px;
@border: 1px solid #e4e7ed;

.drawer {

  .drawer-content {
    height: calc(100% - 42px);
    border-top: @border;
    border-bottom: @border;
    padding: @padding-top 0px;
  }

  .drawer-footer {
    height: 42px;
    text-align: right;
    padding-top: @padding-top;
  }

  /deep/ .el-drawer__header {
    margin-bottom: 0px;
  }
}

</style>